<template>
  <div class="music-list">
			<!-- 切换按钮 -->
			<div class="back" @click="back">
				<div class="icon-back"></div>
			</div>
			<!-- 标题 -->
			<h1 class="title" v-html="title"></h1>
			<!-- img -->
			<div class="bg-image" ref="bgImage" :style="bgStyle">
				<div class="play-wrapper">
					<div class="play" v-show="songs.length>0" ref="playBtn" @click="random">
						<i class="icon-play"></i>
						<span class="text">随机播放全部</span>
					</div>
				</div>
				<div class="filter" ref="filter"></div>
			</div>
			<!-- 滑动滚动层 -->
			<div class="bg-layer" ref="layer"></div>
			<!-- 下拉的歌曲列表 -->
			<scroll :dataA="songs" @scroll="scroll"  class="list" ref="list"
				:probe-type="probeType" :listen-scroll="listenScroll" >
				<div class="song-list-wrapper">
					<song-list :songs="songs" :rank="rank" @select="selectItem"></song-list>
				</div>
				<div v-show="!songs.length" class="loading-container">
					 <loading></loading>
				</div>
			</scroll>
  </div>
</template>

<script>
import Scroll from 'base/scroll/scroll'
import Loading from 'base/loading/loading'
import SongList from 'base/song-list/song-list'
import {prefixStyle} from 'common/js/dom'
import {playlistMixin} from 'common/js/mixin'
import {mapActions,mapMutations} from 'vuex'
const RESERVED_HEIGHT = 40//预留顶部的距离
const transform = prefixStyle('transform')
const backdrop = prefixStyle('backdrop-filter')
export default {
  name: 'musiclist',
	mixins: [playlistMixin],
	props:{
		bgImage:{//背景图
			type:String,
			default:""
		},
		songs:{//主数据
			type:Array,
			default:function(){
				return []
			}
		},
		title:{//标题
			type:String,
			default:''
		},
		rank:{//排行
			type:Boolean,
			default:false
		}
	},
	data() {
		return {
			scrollY:0
		}
	},
	created() {
		this.probeType = 3 //实时监听
		this.listenScroll = true //是否监听滚动条位置
	},
	mounted() {//动态获取滚动条距离图片的距离
		this.imageHeight=this.$refs.bgImage.clientHeight;
		this.minTransalteY=-this.imageHeight+RESERVED_HEIGHT//预留顶部的距离
		this.$refs.list.$el.style.top=`${this.imageHeight}px`
	},
	computed:{
		bgStyle(){
			if(this.bgImage){
				return `background:url(${this.bgImage});background-size: cover;`
			}
		}
	},
	methods: {
		handlePlaylist(playlist) { //歌曲顶部的距离 60px 
			const bottom = playlist.length > 0 ? '60px' : ''
			this.$refs.list.$el.style.bottom = bottom
			this.$refs.list.refresh()
		},
		selectItem(item, index) { //song-list派发出来的点击事件」
			this.selectPlay({
				list:this.songs,
				index
			})
		},
		scroll(pos){
			this.scrollY = pos.y
		},
		back(){
			this.$router.back()
		},
		random() { //随机播发 黄色的文字
			this.randomPlay({
				list: this.songs
			})
		},
		...mapActions([
			'selectPlay',
			'randomPlay'
		])
	},
	watch: {
		  scrollY(newVal) {//获取滚动值 设置滚动层的向上偏移位置
        let translateY = Math.max(this.minTransalteY, newVal)
        let scale = 1
        let zIndex = 0
        let blur = 0//图片下拉算法
        const percent = Math.abs(newVal / this.imageHeight)
        if (newVal > 0) { //列表往下拉
          scale = 1 + percent
          zIndex = 10
        } else {
          blur = Math.min(20, percent * 20)
        }
        this.$refs.layer.style[transform] = `translate3d(0,${translateY}px,0)`
				this.$refs.filter.style[backdrop] = `blur(${blur}px)`
        if (newVal < this.minTransalteY) {//滚到顶部
          zIndex = 10
          this.$refs.bgImage.style.paddingTop = 0
          this.$refs.bgImage.style.height = `${RESERVED_HEIGHT}px`
          this.$refs.playBtn.style.display = 'none' //img 按钮消失
        } else {//还没有滚到顶部
          this.$refs.bgImage.style.paddingTop = '70%'
          this.$refs.bgImage.style.height = 0
          this.$refs.playBtn.style.display = ''//img 按钮显示
        }
        this.$refs.bgImage.style[transform] = `scale(${scale})`
        this.$refs.bgImage.style.zIndex = zIndex
      }
    
	},
	components:{
		Scroll,
		Loading,
		SongList
	}

}
</script>

<style lang="scss" scoped >
		.music-list{
			@mixin fixed{position: fixed;top: 0;bottom: 0;background: $color-background;}
			@include qunp()
			z-index: 100;
			.back{
				position: absolute;
				top: 0;
				left: 6px;
				z-index: 50;
				.icon-back{
					display: block;
					padding: 10px;
					font-size: $font-size-large-x;
					color: $color-theme;
				}
			}
			.title{
				position: absolute;
				top: 0;
				left: 10%;
				width: 80%;
				z-index:40;
				@include no-wrap();
				text-align: center;
				line-height: 40px;
				font-size: $font-size-large;
				color: $color-text;
			}
			.bg-image{
				position: relative;
				width: 100%;
				height: 0;
				padding-top: 70%;
				transform-origin:top;
				background-size:cover;
				.play-wrapper{
					position: absolute;
					bottom: 20px;
					z-index: 50;
					width: 100%;
					.play{
						box-sizing: border-box;
						width: 135px;
						padding: 7px 0;
						margin: 0 auto;
						text-align: center;
						border: 1px solid $color-theme;
						color: $color-theme;
						border-radius:100px;
						font-size: 0;
						.icon-play{
							display: inline-block;
							vertical-align: middle;
							margin-right: 6px;
							font-size: $font-size-medium-x
						}
						.text{
							display: inline-block;
							vertical-align: middle;
							font-size: $font-size-small;
						}
					}
				}
				.filter{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: rgba(7,17,27,0.4);
				}
			}
			.bg-layer{
				position: relative;
				height: 100%;
				background: $color-background;
			}
			.list{
				@include fixed();
				width: 100%;
				.song-list-wrapper{
					padding: 20px 30px;
				}
				.loading-container{@include jucen()}
			}
		}
</style>